<template>
 <div id="app">
 <!-- v-model修饰符，语法：v-model.修饰符="变量" -->

    <!--1、 .number修饰符的作用，是把值转换为数字类型再赋值给我们的vue变量 -->
<input type="number" v-model.number="age"  placeholder="转成数字把"><br>


    <!--2、 .trim修饰符，去除首尾的空白符，然后赋值给变量 -->
 <input type="text" v-model.trim="tex" placeholder="去除首位空白符"><br>

     <!-- 3、.lazy修饰符，作用是对于input来说，失去焦点的时候更新vue变量 -->
     <!-- lazy是在change事件触发的时候，去更新变量 -->
     <!-- 对于input来说，失去焦点的时候触发change事件@ -->
  
     <input type="text" v-model.lazy="laz" placeholder="输入完毕失去焦点"><br>
 </div>

</template>

<script>
export default {
 name: "App",
 // 插值表达式使用的变量放在data函数的返回对象里
 data() {
  return{
age:"",
tex:"",
laz:"",
 }
 }
};
</script>

<style>
div {
color: plum; text-align: center;
}

</style>
